<template>
  <div class="back">
    <ElButton type="text" @click="router.push('/')">
      <el-icon><HomeFilled /></el-icon>
      返回首页
    </ElButton>
  </div>
  <div class="main">
    <div>
      <el-tabs v-model="activetab" type="card">
        <el-tab-pane label="用户名注册" name="userreg">
          <div class="pd05" v-loading="loading">
            <el-form>
              <el-form-item>
                <el-input v-model="user.username" placeholder="登录名" autofocus>
                  <template #prefix>
                    <el-icon><UserFilled /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="user.password" show-password placeholder="密码">
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <div class="btns">
                <el-button type="primary" @click="userreg">
                  注册
                  <el-icon><Check /></el-icon>
                </el-button>
                <el-button type="text" @click="router.push('/user/login')">登录</el-button>
              </div>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="邮箱注册" name="mailreg">
          <div class="pd05">
            <el-form-item label="邮箱地址" label-width="5em">
              <el-input v-model="euser.email" />
            </el-form-item>
            <el-form-item label="验证码" label-width="5em">
              <div style="display: flex">
                <el-input v-model="euser.code" />
                <ElButton type="primary" @click="sendMailCode">获取验证码</ElButton>
              </div>
            </el-form-item>
            <el-form-item label="密码" label-width="5em">
              <el-input v-model="euser.password" show-password placeholder="密码">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <div class="btns">
              <el-button type="primary" @click="emailreg">
                注册
                <el-icon><Check /></el-icon>
              </el-button>
              <el-button type="text" @click="router.push('/user/login')">登录</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="手机注册" name="phonereg">
          <div class="pd05">
            <el-form-item label="手机号码" label-width="5em">
              <el-input v-model="puser.phone" />
            </el-form-item>
            <el-form-item label="验证码" label-width="5em">
              <div style="display: flex">
                <el-input v-model="puser.code" />
                <ElButton type="primary" @click="sendPhoneCode">获取验证码</ElButton>
              </div>
            </el-form-item>
            <el-form-item label="密码" label-width="5em">
              <el-input v-model="puser.password" show-password placeholder="密码">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <div class="btns">
              <el-button type="primary" @click="phonereg">
                注册
                <el-icon><Check /></el-icon>
              </el-button>
              <el-button type="text" @click="router.push('/user/login')">登录</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ApiService } from '../../ts/ApiService'
import { BaseResult } from '../../ts/types/BaseResult'
import { ElMessage } from 'element-plus'
const router = useRouter()
const activetab = ref('userreg')
const loading = ref(false)

//#region 用户名注册

const user = ref({ username: '', password: '' })

const userreg = () => {
  loading.value = true
  ApiService.post('/user', user.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion

//#region 邮箱注册

const euser = ref({ email: '', password: '', code: '' })

const emailreg = () => {
  loading.value = true
  ApiService.post('/user/email', euser.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
    } else {
      ElMessage.error(data.message)
    }
  })
}

const sendMailCode = () => {
  loading.value = true
  ApiService.post('/tools/sendMailCode', { email: euser.value.email }, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion

//#region 手机注册

const puser = ref({ phone: '', password: '', code: '' })

const phonereg = () => {
  loading.value = true
  ApiService.post('/user/phone', puser.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
    } else {
      ElMessage.error(data.message)
    }
  })
}

const sendPhoneCode = () => {
  loading.value = true
  ApiService.post('/tools/sendPhoneCode', { phone: puser.value.phone }, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion
</script>

<style lang="scss" scoped>
.back {
  padding: 1rem;
  position: fixed;
  z-index: 2;
  top: 0px;
  right: 0px;
}
.pd05 {
  padding: 0.5rem;
  height: 20em;
  width: 25em;
}
.main {
  width: 100vw;
  height: 100vh;
  > div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.btns {
  text-align: end;
}
</style>
